<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 利用fileReader将图片转为base64格式 -->
    <img id="img" src="">
    <input id="file" type="file" onchange="Tobase64()">
</body>
<script>
    function Tobase64() {
        console.log('---------');
        console.log(document.getElementById('file'), '原生文件对象');
        let fileObj = document.getElementById('file').files[0]  //获取文件对象
        let reader = new FileReader()   //新建一个FileReader对象
        reader.readAsDataURL(fileObj)   //将读取的文件转换成base64格式
        reader.onload = function (e) {
            console.log('==============');
            console.log(e, '事件对象');
            document.getElementById('img').src = e.target.result    //将img标签的src换成base64格式，并显示出来
        }
    }
</script>

</html>